<template>
	<div class=""
		v-loading="loading.status"
		:element-loading-text="loading.txt"
	>
		<!--  -->
		<div class="pointMark_video">
			<video-player  class="video-player vjs-custom-skin" id="videoPlayer"
			ref="videoPlayer"
			:playsinline="true"
			:options="playerOptions"
			@play="onPlayerPlay($event)"
			@pause="onPlayerPause($event)"
			 @ready="playerReadied"
			></video-player>
		</div>
		<div class="publishFrom">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标注信息" prop="comment">
					<el-input v-model.trim="ruleForm.comment" placeholder="描述看点，不超过15个字" maxlength="15    "></el-input>
				</el-form-item>
				<div class="publishFrom_if clear">
					<el-form-item label="打点时间" prop="dottingTime" class="publishFrom_if_l fl">
						<span>
							<el-time-picker
							   v-model="ruleForm.dottingTime"
							   value-format="HH:mm:ss"
							   :arrow-control="true"
							   :picker-options="{
							   	 format: 'HH:mm:ss',
							     selectableRange: '00:00:00-'+timeMax
							   }"
							   placeholder="任意时间点">
							 </el-time-picker>
							
						</span>
						<i class="el-icon-location" @click="getVideoPlayTime()"></i>
					</el-form-item>
					<!--  -->
					<div class="publishFrom_if_r fr">
						<el-form-item class="buttonCSS" label-width="0"  prop="thumbnail">
							<el-checkbox v-model="ruleForm.thumbnail">视频缩略图</el-checkbox>
							<!-- <el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button> -->
							<el-button type="primary" @click="submitForm('ruleForm')">生成知识点</el-button>
						</el-form-item>
					</div>
				</div>
				
			</el-form>
		</div>
		<div class="publishFrom_table">
			<template>
				<el-table
				border
				:data="pointData"
				style="width: 100%">
					<el-table-column
						prop="comment"
						label="标注信息"
						width="420">
					</el-table-column>
					<el-table-column
						prop="video_time"
						label="打点时间"
						 align="center"
						width="150">
					</el-table-column>
					<el-table-column
					    label="操作"
					    align="center"
					    width="128">
					    <template slot-scope="scope">
					      <el-button @click="deleteVideoPoint(scope.row)" type="text" size="small">删除</el-button>
					    </template>
					  </el-table-column>
				</el-table>
			</template>
			
		</div>
	</div>
	
</template>
<script>
	// import 'videojs-flash';
	// import SWF_URL from 'videojs-swf/dist/video-js.swf';

	export default {
		props : ['compParam','activeIndex'],
		name: '',
		data() {
			return {
				thisIndex:'2',
				loading:{
					status:false,
					txt:'获取数据...'
				},
				timeMax: '00:00:00',
				checked: true,
				ruleForm: {
					videoName: '', //视频名称
					dottingTime: '00:00:00', //打点时间
					thumbnail: true, //缩略图

				},
				rules: {
					comment: [
						{ required: true, message: '请输入标注信息', trigger: 'blur' },
						{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					],
					dottingTime: [
						{ required: true, message: '请输入打点时间', trigger: 'blur' },
					]
				},

				playerOptions : {
					  loop: false,
				      height: '360',
			          sources: [{
			             type: "application/x-mpegURL", // application/x-mpegURL rtmp/mp4类型
			             src: "00"
			          }],
			          autoplay: false,
			          controls: true,
			          poster: "",
			          language: 'zh-CN',
					  controlBar: {
				          timeDivider: true,
				          durationDisplay: true,
				          remainingTimeDisplay: false,
				          fullscreenToggle: true  //全屏按钮
				        },
				},
				pointData: [],

			}
		},
		computed: {

		},
		created(){

		},

	    mounted(){
	    	this.initFunc();
	    },
	    beforeDestroy(){
	    	this.$refs.videoPlayer && this.$refs.videoPlayer.player.reset()
	    },
		methods: {
			

			playerReadied(player) {
			  // seek to 10s
			  // console.log('example player 1 readied', player)
			  // player.currentTime(10)
			  // console.log('example 01: the player is readied', player)
			},
			initFunc(){
				this.$refs.videoPlayer.player.src({ src : this.compParam.play_url }) ;
				// this.$refs.videoPlayer.options.sources[0].src =  this.compParam.play_url;
				this.getPointMark();
			},
		
			//视频信息
			getPointMark(){
				//this.pointData = [];
				this.loading.status = true;
				let success = (data=>{
				this.loading.status = false;
					let result = data.data;
					this.pointData = result.point;
					for (var i = this.pointData.length - 1; i >= 0; i--) {
						var newTime = formatSeconds(this.pointData[i].video_time);
						this.pointData[i].video_time_num = this.pointData[i].video_time;
						this.pointData[i].video_time = newTime.hour+':'+newTime.minute+':'+newTime.second
					}
					this.timeMax =  result.length;
					this.resolveMark();
				});
				let fail = ( data => {
					this.loading.status = false;
					this.$message.error(data.msg)
				})
				this.$ajax.get('api/video/video_point_list',{params: {videoid:this.compParam.id},func:{success:success}})
			},
			getVideoPlayTime(){
				var nowTime = formatSeconds(this.$refs.videoPlayer.player.currentTime());
				this.ruleForm.dottingTime = nowTime.hour+':'+nowTime.minute+':'+nowTime.second
			},
			savePoint(){
				var videotime = this.ruleForm.dottingTime.split( ":" ); // 时间字符分割 
				var videotimeSeconds = parseInt( videotime[ 0 ] * 3600 ) + parseInt( videotime[ 1 ] * 60 ) + parseInt( videotime[ 2 ] ); // 时间转成秒数
				if (videotimeSeconds === 0) {
					return this.$message.error('请选择开始时间')
				}
				var params = {
					videoid : this.compParam.id,
					comment : this.ruleForm.comment,
					videotime : videotimeSeconds,
					thumbnail:this.ruleForm.thumbnail? 1 : 0
				}

				let success = (data=>{
					this.$message.success(data.msg);
					this.$refs.videoPlayer.player.currentTime(0);
					this.getPointMark();
					this.resetForm('ruleForm');
					/*this.$message.success(data.msg)
					this.initFunc();
					this.resetForm('ruleForm');*/
				});
				this.$ajax.post('api/video/video_point',params,{func:{success:success}})
			},
			deleteVideoPoint( obj ){
				let yes = ( data => {
					let success = ( data => {
						this.getPointMark();
						this.$message.success(data.msg)
					})
					this.$ajax.delete('api/video/video_point',{params: {id:obj.id},func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.comment+' 删除吗？'});
			},
			
			resolveMark(){
				//先删除所有打点
				var dotting_time_element = this.$refs.videoPlayer.player.controlBar.progressControl.el_.children[0].getElementsByClassName('dotting_time');
				if( dotting_time_element.length > 0 ){
					for (var i = dotting_time_element.length - 1; i >= 0; i--) {
						this.$refs.videoPlayer.player.controlBar.progressControl.el_.children[0].removeChild(dotting_time_element[i]);
					}
					
				}
				if( this.pointData.length > 0 ){
					var newTime = this.compParam.length.split(':');
					var total_time_num = parseInt(newTime[0])*3600+parseInt(newTime[1])*60+parseInt(newTime[2]);
					for(var i = 0 ; i < this.pointData.length ; i ++ ){
						var left =  this.pointData[i].video_time_num/total_time_num * 100;
						var image =  this.pointData[i].picture != '' ? `<img src="${this.BASE_URL}${this.pointData[i].picture}" >` : '';

						var	html  = `<div class="dotting_time"  
										style="background:#54b554;
										left: ${left}%;
										width:5px;height:100%;
										position:absolute;z-Index:55;"
										 current_time="">
										<div class="low_source">
											<p class="low_h">${this.pointData[i].comment}</p>
											${image}
											<p class="low_h">${this.pointData[i].video_time}</p>
										</div>
									</div>`
						this.$refs.videoPlayer.player.controlBar.progressControl.el_.children[0].insertAdjacentHTML('beforeend',html)
					}
				}
				
	
			},


			//视频
			// listen event
			onPlayerPlay(player) {
				// this.onSlicePlay()
				//渲染打点
				this.resolveMark();
			},
			onPlayerPause(player) {
				// console.info(player,2)
				// // console.log('player pause!', player)
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			//表单验证
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.savePoint();
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		}
	}
</script>